<template>
	<view class="market">
		<home-page :navList="navList" v-if="tabbarActive === 0 && pageType === 'home'" @tabbar="toFenlei" />
		<cart-page v-if="tabbarActive === 0 && pageType === 'cart'" />
		<order-page v-if="tabbarActive === 2" :key="'order-' + tabbarActive" @tabbar="e => tabbarActive = e"/>
		<fen-lei-page :navList="navList" :cid="cid" v-if="tabbarActive === 1" @tabbar="e => tabbarActive = e" />
		
		<movable-area class="movable-area" v-if="pageType != 'cart'">
			<movable-view direction="vertical" :y="windowHeight" class="movable-view">
				<view hover-class="none" class="cart" @click="cartClick">
					<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/cb073202508161256243980.png" mode="widthFix" />
					<view class="badge">
						<uv-badge type="warning" max="99" :value="cartNum" />
					</view>
				</view>
			</movable-view>
		</movable-area>
		<lst-tabbar :value="tabbarActive" :list="tabbarList" isClick @ok="tabbarClick"/>
	</view>
</template>

<script setup>
	import { ref, watch } from 'vue';
	import { storeToRefs } from "pinia"
	import { useUserStore, useTabbarStore } from '@/store'
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import { getMarketSonCategory, getMarketCartNum } from '@/api'
	
	import HomePage from './components/home.vue'
	import CartPage from './components/cart.vue'
	import OrderPage from './components/order.vue'
	import FenLeiPage from './components/fenlei.vue'
	
	
	const user = useUserStore()
	const tabbarStore = useTabbarStore()
	const { token } = storeToRefs(user)
	
	
	const cid = ref('')
	const cartNum = ref(0)
	const navList = ref([])
	const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 250)
	const pageType = ref('home')
	const tabbarActive = ref(0)
	const tabbarList = [
		{ text: '首页', inactive: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/f3301202508161043448531.png', 
		active: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/22463202508161044175474.png', path: '' },
		{ text: '分类', inactive: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/c8c6b202508161046417010.png', 
		active: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/d62b6202508161047229885.png', path: '' },
		{ text: '订单', inactive: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/e1f91202508161044512602.png', 
		active: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/2edbe20250816104518674.png', path: '' }
	]
	const cartClick = () => {
		if(pageType.value === 'cart' && tabbarActive.value == 0) return
		pageType.value = 'cart'
		tabbarActive.value = 0
		tabbarStore.setActive(tabbarActive.value)
	}
	
	const tabbarClick = async (i) => {
		if(!token.value){
			uni.navigateTo({
				url: '/pages/auth/index'
			})
			return 
		}
		
		
		
		if((pageType.value === 'cart' || pageType.value === 'order') && i === 0) {
			pageType.value = 'home'
			await getCategory()
			tabbarActive.value = i
			
		} else {
			if(tabbarActive.value === i) return
			if (i == 1){
				await getCategory()
			}
			tabbarActive.value = i
		}
		tabbarStore.setActive(tabbarActive.value)
		getCartNum()
	}
	
	const toFenlei = (id) => {
		cid.value = id
		tabbarActive.value = 1
	}
	
	const getCategory = async () => {
		if (navList.value.length == 0) {
			const { result } = await getMarketSonCategory()
			navList.value = result
		}
	}
	
	const getCartNum = async () => {
		if(!token.value) return
		const { result } = await getMarketCartNum()
		cartNum.value = result
	}
	
	watch(tabbarActive, () => {
		if(tabbarActive.value != 1) cid.value = ''
	})
	
	onLoad((option) => {
		if(option.type && option.type === 'cart'){
			pageType.value = 'cart'
			tabbarActive.value = 0
		} else if (option.type && option.type === 'order') {
			pageType.value = 'order'
			tabbarActive.value = 2
		} else {
			getCategory()
		}
		tabbarStore.setActive(tabbarActive.value)
	})
	
	onShow(() => getCartNum())
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F4F7!important;
		height: 100vh;
	}
	.movable-area {
		pointer-events: none;
	}
	.movable-view {
		pointer-events: auto;
	}
	.cart {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		pointer-events: auto;
		position: relative;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #fff;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 5rpx;
		}
		.badge {
			
			right: 6rpx;
			top: 10rpx;
			position: absolute;
		}
	}
</style>